body{
    margin:0;
    padding:0;
}
ul{
    list-style: none;
    margin:0;
    padding:0;
}
.box{
    position: absolute;
    left: 50%;
    top:50%;
    transform: translate(-50%,-50%);
    width: 350px;
    height: 60px;
    /* outline: 1px solid red;; */
}

.box ul li{
    float: left;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    text-align: center;
    margin-right: 5px;
    position: absolute;
    left: 0;
    top:0;
    transition: all 1s ;
    
}
.box ul li:nth-child(1){
    background-image: linear-gradient(to right,#E10BF8,#AB1FEA);
    width: 300px;
    border-radius:30px ;
    z-index: 10;
   
}
.box ul li:nth-child(2){
    background-color:blue;
    
}
.box ul li:nth-child(3){
    background-color:#55ACEE;

}
.box ul li:nth-child(4){
    background-color:#DD4B39;

}
.box ul li:nth-child(5){
    background-color:#E4405F;
   
}
.box ul li a{
    color: white;
    line-height: 60px;
    font-size: 1.5em;
    
}
/* hover之后 */
.box:hover li:first-child{
    width: 60px;
}
.box:hover li:nth-child(2){
    transform: translateX(65px) rotate(360deg);
    transition-delay: 0.2s;
}
.box:hover li:nth-child(3){
    transform: translateX(130px)  rotate(360deg);
    transition-delay: 0.2s;
}
.box:hover li:nth-child(4){
    transform: translateX(195px)  rotate(360deg);
    transition-delay: 0.2s;
}
.box:hover li:nth-child(5){
    transform: translateX(260px)  rotate(360deg);
    transition-delay: 0.2s;
}

